<template>
  <a-tabs v-model:activeKey="activeTab" @change="refresh">
    <a-tab-pane key="demand" title="需求单记录">
      <a-table :columns="columns.demand" :data="data.demand" :scroll="{ x: 2400 }" />
    </a-tab-pane>
    <a-tab-pane key="service" title="服务历史">
      <a-table :columns="columns.service" :data="data.service" :scroll="{ x: 4400 }" />
    </a-tab-pane>
    <a-tab-pane key="contract" title="签约历史">
      <a-table :columns="columns.contract" :data="data.contract" />
    </a-tab-pane>
    <a-tab-pane key="complaint" title="投诉记录">
      <a-table :columns="columns.complaint" :data="data.complaint" :scroll="{ x: 1400 }"  />
    </a-tab-pane>
    <a-tab-pane key="followUp" title="历史跟进记录">
      <a-table :columns="columns.followUp" :data="data.followUp" />
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, PropType } from 'vue';
import type { TableColumnData } from '@arco-design/web-vue';
import { getDemandFollowUpList, getDemandList } from '@/api/demand';
import { getServiceOrders } from '@/api/serviceOrder';
import { getComplaintList } from '@/api/demandComplaint';
import { getProjectList } from '@/api/service';

type TabKey = 'demand' | 'service' | 'contract' | 'complaint' | 'followUp';

export default defineComponent({
  name: 'RecordTabs',
  props: {
    username: {
      type: String,
      required: true
    },
    address: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const activeTab = ref<TabKey>('demand');
      const fetchList = async (params) => {
        const { data: responseData } = await getComplaintList(params);
        return {
          data: responseData.list,
          total: responseData.total,
          success: true,
        };
      };
      
      const fetchDemandList = async (params) => {
        const { data: responseData } =( await getDemandFollowUpList(params)) as any;
        return {
          data: responseData.list,
        };
      }
    const columns = reactive<Record<TabKey, TableColumnData[]>>({
      demand: [
        { title: '需求单号', dataIndex: 'demandNo',ellipsis: true },
        { title: '创建时间', dataIndex: 'createTime',ellipsis: true },
        { title: '需求类型', dataIndex: 'typeName' },
        { title: '需求人信息', dataIndex: 'demandPersonName' },
        { title: '需求人', dataIndex: 'demandPerson' },
        { title: '归属人', dataIndex: 'createUserName' },
        { title: '跟进人', dataIndex: 'followUpUserName' },
        { title: '联系人', dataIndex: 'contactName' },
        { title: '手机号', dataIndex: 'contactPhone' },
        { title: '需求渠道', dataIndex: 'channelName' },
        { title: '四级分类', dataIndex: 'fourTypeName' },
        {
          title: '需求单状态', dataIndex: 'demandStatus'
        },
        { title: '需求单跟进人', dataIndex: '需求单跟进人', },
        { title: '服务项目', dataIndex: 'productType', },
        { title: '金额', dataIndex: 'orderPrice', },
        { title: '预约日期', dataIndex: 'reservationTime' },
      ],
      service: [
        { title: 'ID', dataIndex: 'id' },
        { title: '需求人姓名', dataIndex: 'demandPersonName' },
        { title: '需求人手机号', dataIndex: 'demandPersonPhone', ellipsis: true },
        { title: '需求人座机号', dataIndex: 'demandPersonLandlinePhone' },
        { title: '需求人标签', dataIndex: 'demandPersonTag' },
        { title: '需求人省份', dataIndex: 'demandPersonProvince' },
        { title: '需求人城市', dataIndex: 'demandPersonCity' },
        { title: '需求人区县', dataIndex: 'demandPersonCounty' },
        { title: '需求人地址', dataIndex: 'demandPersonAddress' },
        { title: '分类名称', dataIndex: 'typeName' },
        { title: '渠道名称', dataIndex: 'channelName' },
        { title: '四级分类名称', dataIndex: 'fourTypeName' },
        { title: '联系人姓名', dataIndex: 'contactName' },
        { title: '联系人手机号', dataIndex: 'contactPhone' },
        { title: '服务地址省份', dataIndex: 'contactProvince' },
        { title: '服务地址城市', dataIndex: 'contactCity' },
        { title: '服务地址区县', dataIndex: 'contactCounty' },
        { title: '服务地址', dataIndex: 'contactAddress', ellipsis: true },
        { title: '预约时间', dataIndex: 'reservationTime', ellipsis: true },
        { title: '需求单编号', dataIndex: 'demandNo', ellipsis: true },
        { title: '服务单号', dataIndex: 'serviceNo', ellipsis: true },
        { title: '金额', dataIndex: 'orderPrice' },
        { title: '退款金额', dataIndex: 'returnPrice' },
        {
          title: '服务订单类型', dataIndex: 'productType', render: ({ record }) => {
            const typeMap = {
              1: '保洁',
              2: '搬家',
              3: '保养',
              4: '维修',
            };
            return typeMap[record.productType] || '未知';
          }
        },
        { title: '服务订单状态', dataIndex: 'serviceStatus' },
        { title: '实收金额', dataIndex: 'payPrice' },
        { title: '支付时间', dataIndex: 'payTime', ellipsis: true },
        { title: '服务订单创建时间', dataIndex: 'createTime', ellipsis: true },
        { title: '服务订单创建人', dataIndex: 'createUserName', ellipsis: true },
        { title: '退款状态', dataIndex: 'returnStatus' },
        { title: '退款发起时间', dataIndex: 'returnLaunchTime', ellipsis: true },
        // { title: '退款发起人', dataIndex: 'returnLaunchUserName' },
      ],
      contract: [
        { title: '合同ID', dataIndex: 'id' },
        { title: '合同金额', dataIndex: 'amount' },
        { title: '签约时间', dataIndex: 'signedAt' },
      ],
      complaint: [
        { title: "投诉单号", dataIndex: "complaintNo", width: 140, ellipsis: true },

        {
          title: "需求单状态",
          dataIndex: "status",
          render: ({ record }) => {
            const typeMap = {
              1: '待处理',
              2: '跟进中',
              '-1': '已关闭', // 处理特殊值
            };
            return typeMap[record.status] || '未知';
          },
        },
        { title: "投诉时间", dataIndex: "createTime", width: 200 },
        { title: "接收人", dataIndex: "createUserName" },
        { title: "指派对象", dataIndex: "assignUserName" },
        { title: "用户姓名", dataIndex: "contactName" },
        { title: "手机号", dataIndex: "contactPhone", width: 130 },
        { title: "用户地址", dataIndex: "contactAddress" },
        { title: "创建时间", dataIndex: "createTime", width: 180 },
      ],
      followUp: [
        { title: 'ID', dataIndex: 'id' },
        { title: '需求单ID', dataIndex: 'demandId' },
        { title: '计划日期', dataIndex: 'planDate' },
        { title: '完成日期', dataIndex: 'finishDate' },
        { title: '说明', dataIndex: 'planInfo' }
      ],
    });

    const fetch = {
      demand: getDemandList,
      service: getServiceOrders,
      complaint: fetchList,
      followUp: fetchDemandList,
      contract: getProjectList
    }

    const data = reactive<Record<TabKey, any[]>>({
      demand: [],
      service: [],
      contract: [],
      complaint: [],
      followUp: [],
    });

    const refresh = () => {
      console.log(`Refreshing data for ${activeTab.value} with username: ${props.username}`);
      fetch[activeTab.value]({ page: 1, size: 10,phone: props.username,address:props.address, condition: { demandPerson: props.username } }).then(newData => {
        console.log(newData, '-newData')
        data[activeTab.value] = newData.data;
      });
      // 这里应该根据activeTab和username来调用相应的API获取最新数据
      // 例如：
      // if (activeTab.value === 'demand') {
      //   fetchDemandData(props.username).then(newData => {
      //     data.demand = newData;
      //   });
      // }
    };

    return {
      activeTab,
      columns,
      data,
      refresh,
    };
  },
});
</script>